<template>
  <div id="pingjia">
    <section class="top">
      <div class="left">
        <h2>{{Math.round((obj.overall_score)*10)/10}}</h2>
        <span>综合评价</span>
        <p>
          {{'高于周边商家'+((obj.compare_rating)*100).toFixed(1)+'%'}}
        </p>
      </div>
      <div class="right">
        <div class="top">
          <span>服务态度</span>
          <div class="svg">
            <svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%" v-for='(num,index) in Math.round(service_score)' :class="{'fill':btn=num?true:false}" :key='index' >
                <path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path>
            </svg>
             <svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%" v-for='(num,index) in (5-Math.round(service_score))' :key='index' >
                <path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path>
            </svg> 
          </div>
          <span>{{Math.round((obj.service_score)*10)/10}}</span>
        </div>
        <div class="middle">
          <span>菜品评价</span>
          <div class="svg">
            <svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%" v-for='(num,index) in Math.round(food_score)' :class="{'fill':btn=num?true:false}" :key='index' >
                <path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path>
              </svg>
              <svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%" v-for='(num,index) in (5-Math.round(food_score))' :key='index' >
                <path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path>
              </svg> 
          </div>
          <span>{{Math.round((obj.food_score)*10)/10}}</span>
        </div>
        <div class="bottom">
          <span>送达时间</span>
          <span>
            {{obj.deliver_time+'分钟'}}
          </span>
        </div>
      </div>
    </section>
    <section class="bottom">
      <header>
        <span v-for='(arr,index) in arrs' :key='index' :class="{'unsatisfied':unsatisfied=arr.unsatisfied?true:false}">{{arr.name+'('+arr.count+')'}}</span>
      </header>
      <div v-for='(site,index) in sites' :key='index'>
        <img src="https://fuss10.elemecdn.com/f/2e/20a4300d40b97e98a5889591fb1f2jpeg.jpeg?imageMogr/format/webp/thumbnail/!60x60r/gravity/Center/crop/60x60/">
        <div class="right">
          <div class="left">
            <p>{{site.username}}</p>
            <div class="svg">
               <svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%" v-for='(num,index) in (site.rating_star)' :key='index' :class='{"fill":btn=num?true:false}'>
                <path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path>
              </svg>
              <svg viewBox="0 0 22 22" id="rating-star" width="100%" height="100%" v-for='(num,index) in (5-site.rating_star)' :key='index' >
                <path fill-rule="evenodd" d="M10.986 17.325l-5.438 3.323c-1.175.718-1.868.208-1.55-1.126l1.48-6.202-4.84-4.15c-1.046-.895-.775-1.71.59-1.82l6.353-.51L10.03.95c.53-1.272 1.39-1.266 1.915 0l2.445 5.89 6.353.51c1.372.11 1.632.93.592 1.82l-4.84 4.15 1.478 6.202c.32 1.34-.38 1.84-1.55 1.126l-5.437-3.323z"></path>
              </svg> 
              <span>{{site.time_spent_desc}}</span>
            </div>
            <p class='cont'>{{site.rating_text}}</p>
            <div class="bottom">
              <span v-for='(site,index) in site.item_ratings'>{{site.food_name}}</span>
            </div>
          </div>
        </div>
        <div class="time">
          {{site.rated_at}}
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'pingjia',
  data() {
    return {
      obj: {},
      arrs: [],
      sites: [],
      service_score: 0,
      food_score: 0
    }
  },
  mounted() {
    var id = this.$route.query.id;
    var that = this;
    //  获取商家的分数
    axios.get('http://localhost:3000/ratings/scores', {
      params: {
        id: id
      }
    }).then(function (successCB) {
      that.obj = successCB.data;
      that.service_score = successCB.data.service_score;
      that.food_score = successCB.data.food_score;
      // console.log(that.obj);
    }).catch(function (errorCB) {
      console.log('评价页网络异常!');
    });
    //  获取商家的满意度
    axios.get('http://localhost:3000/ratings/tags', {
      params: {
        id: id
      }
    }).then(function (successCB) {
      that.arrs = successCB.data;
      // console.log(that.arrs);
    }).catch(function (errorCB) {
      console.log('评价页网络异常!');
    })
    //  获取买家的评价
    axios.get('http://localhost:3000/ratings/content', {
      params: {
        id: id
      }
    }).then(function (successCB) {
      that.sites = successCB.data;
      // console.log(that.sites);
    }).catch(function (errorCB) {
      console.log('评价页网络异常!');
    })
  }
}
</script>

<style lang="scss" scoped>
@import '../../static/hotcss/px2rem';
#pingjia {
  .svg {
    display: inline-block;
    font-size: 0;
    svg {
      width: px2rem(12);
      fill: #DDD;
    }
    .fill{
      fill:#FFAA0C;
    }
  }
  >.top {
    background-color: #FFF;
    padding: px2rem(15) px2rem(10);
    margin-bottom: px2rem(10);
    .left {
      display: inline-block;
      padding-right: px2rem(15);
      text-align: center;
      border-right: px2rem(1) solid #CCC;
      h2 {
        color: #FF6600;
        font-size: px2rem(30);
      }
      span {
        display: inline-block;
        color: #666;
        padding-bottom: px2rem(5);
      }
      p {
        color: #999;
      }
    }
    .right {
      padding-left: px2rem(15);
      display: inline-flex;
      flex-direction: column;
      vertical-align: top;
      width: 55%;
      .svg {
        padding-right: px2rem(10);
      }
      >div {
        flex: 1;
        width: 90%;
        padding: px2rem(4) 0;
        span:first-child {
          color: #666;
          padding-right: px2rem(10);
        }
        span:last-child {
          color: #f60;
          float: right;
        }
      }
      .bottom {
        span:last-child {
          color: #666;
          float: none;
        }
      }
    }
  }
  >.bottom {
    background-color: #FFF;
    padding: 0 px2rem(10);
    >header {
      padding: px2rem(20) 0;
      border-bottom: px2rem(1) solid #CCC;
      span {
        padding: px2rem(7) px2rem(4);
        background-color: #EBF5FF;
        margin-right: px2rem(10);
        border-radius: px2rem(5);
        text-align: center;
        color: #6d7885;
        display:inline-block;
        margin-bottom:px2rem(10);
      }
      span:first-child {
        background-color: #3190E8;
        color: #FFF;
      }
      .unsatisfied {
        background-color: #F5F5F5;
      }
    }
    >div {
      position: relative;
      padding: px2rem(20) 0;
      border-bottom: px2rem(1) solid #CCC;
      >img {
        width: px2rem(30);
        margin-right: px2rem(15);
        vertical-align: top;
      }
      .right {
        display: inline-block;
        width: 85%;
        .left {
          >p {
            padding-bottom: px2rem(8);
            color: #666;
          }
          .cont {
            color: #333;
          }
          .svg {
            padding-bottom: px2rem(8);
            span{
              font-size: px2rem(13);
              padding-left: px2rem(8);
              color:  #999;
            }
          }
          .bottom {
            >span {
              display: inline-block;
              width: px2rem(40);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #999;
              font-size: px2rem(12);
              padding: px2rem(4) px2rem(6);
              border: 1px solid #CCC;
              border-radius: px2rem(5);
              margin-right:px2rem(8);
              margin-bottom:px2rem(8);
              text-align:center;
            }
          }
        }
      }
      .time {
        position: absolute;
        right: 0;
        top: 20%;
        color: #999;
        font-size: px2rem(12);
      }
    }
  }
}
</style>